<template>
	<view class="main">
		<uni-drawer :visible="drawer.isShow" :mask="drawer.mask" :mode="drawer.mode" @close="drawer_close">
			<view style="padding:30upx;">
				<view class="uni-title">侧滑</view>
			</view>
		</uni-drawer>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#FF8C69"></uni-segmented-control>
		<view v-show="current==0">
			<block v-for="(item,index) in NewsData" :key="index">
				<view class="News_viwe" :id="item.NewsUrl" @click="readNews">
					<view class="One_pic_news">
						<view class="One_pic_news_top">{{item.NewsTitle}}</view>
						<view class="One_pic_news_down">
							<view class="One_pic_news_down_left">
								<image :src="item.NewsPic01" class="img"></image>
							</view>
							<view class="One_pic_news_down_right">
								<view class="One_pic_news_author">来自于:{{item.NewsAuthor}}</view>
								<view class="One_pic_news_time">时间:{{item.NewsData}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-show="current==1">
			<block v-for="(item,index) in NewsData" :key="index">
				<view class="News_viwe" :id="item.NewsUrl" @click="readNews">
					<view class="One_pic_news">
						<view class="One_pic_news_top">{{item.NewsTitle}}</view>
						<view class="One_pic_news_down">
							<view class="One_pic_news_down_left">
								<image :src="item.NewsPic01" class="img"></image>
							</view>
							<view class="One_pic_news_down_right">
								<view class="One_pic_news_author">来自于:{{item.NewsAuthor}}</view>
								<view class="One_pic_news_time">时间:{{item.NewsData}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-show="current==2">
			<block v-for="(item,index) in NewsData" :key="index">
				<view class="News_viwe" :id="item.NewsUrl" @click="readNews">
					<view class="One_pic_news">
						<view class="One_pic_news_top">{{item.NewsTitle}}</view>
						<view class="One_pic_news_down">
							<view class="One_pic_news_down_left">
								<image :src="item.NewsPic01" class="img"></image>
							</view>
							<view class="One_pic_news_down_right">
								<view class="One_pic_news_author">来自于:{{item.NewsAuthor}}</view>
								<view class="One_pic_news_time">时间:{{item.NewsData}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-show="current==3">
			<block v-for="(item,index) in NewsData" :key="index">
				<view class="News_viwe" :id="item.NewsUrl" @click="readNews">
					<view class="One_pic_news">
						<view class="One_pic_news_top">{{item.NewsTitle}}</view>
						<view class="One_pic_news_down">
							<view class="One_pic_news_down_left">
								<image :src="item.NewsPic01" class="img"></image>
							</view>
							<view class="One_pic_news_down_right">
								<view class="One_pic_news_author">来自于:{{item.NewsAuthor}}</view>
								<view class="One_pic_news_time">时间:{{item.NewsData}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-show="current==4">
			<block v-for="(item,index) in NewsData" :key="index">
				<view class="News_viwe" :id="item.NewsUrl" @click="readNews">
					<view class="One_pic_news">
						<view class="One_pic_news_top">{{item.NewsTitle}}</view>
						<view class="One_pic_news_down">
							<view class="One_pic_news_down_left">
								<image :src="item.NewsPic01" class="img"></image>
							</view>
							<view class="One_pic_news_down_right">
								<view class="One_pic_news_author">来自于:{{item.NewsAuthor}}</view>
								<view class="One_pic_news_time">时间:{{item.NewsData}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uniDrawer from '@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue'
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import uniLoadMore from '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniDrawer,
			uniSegmentedControl,
			uniLoadMore
		},
		data() {
			return {
				title: 'Hello',
				drawer: {
					isShow: false,
					mask: true,
					mode: 'left'
				},
				items: ["头条", "科技", "体育", "社会", "娱乐"],
				current: 0,
				articleData: [],
				WeishowLoad: true,
				WeiloadStaus: 'more',
				WeiPageNum: 2,
				NewsData: []
			}
		},
		onLoad() {
			console.log("页面加载完成,默认加载第一页的内容");
			this.getNews("头条");
		},
		onReachBottom() {
			let index = this.current;
			switch (index) {
				case 0:
					console.log("加载更多头条新闻");
					this.loadMoreNews("头条")
					break;
				case 1:
					console.log("加载更多头条新闻");
					this.loadMoreNews("科技")
					break;
				case 2:
					console.log("加载更多头条新闻");
					this.loadMoreNews("体育")
					break;
				case 3:
					console.log("加载更多头条新闻");
					this.loadMoreNews("社会")
					break;
				case 4:
					console.log("加载更多头条新闻");
					this.loadMoreNews("娱乐")
					break;
				default:
					console.log("加载其他");
					break;
			}
			this.WeishowLoad = false
			this.WeiloadStaus = "loading"
		},
		onNavigationBarButtonTap(res) {
			let button = res.index;
			switch (button) {
				case 0:
					if (this.$data.drawer.isShow) {
						console.log("侧滑关闭");
						this.$data.drawer.isShow = false
					} else {
						console.log("侧滑打开");
						this.$data.drawer.isShow = true
					}
					break;
			}
		},
		methods: {
			drawer_close: function() {
				console.log("侧滑关闭");
				this.$data.drawer.isShow = false
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
				let titles = this.$data.items[this.current]
				uni.setNavigationBarTitle({
					title: titles
				});
				switch (this.current) {
					case 0:
						console.log("点击了第0个");
						this.loadNews(this.items[0])
						break;
					case 1:
						console.log("点击了第1个");
						this.loadNews(this.items[1])
						break;
					case 2:
						console.log("点击了第2个");
						this.loadNews(this.items[2])
						break;
					case 3:
						console.log("点击了第3个");
						this.loadNews(this.items[3])
						break;
					case 4:
						console.log("点击了第4个");
						this.loadNews(this.items[4])
						break;
				}

			},
			getNews: function(newsType) {
				uni.request({
					url: 'https://app.menglinking.club/news/' + newsType,
					method: 'GET',
					success: res => {
						console.log("请求成功");
						this.NewsData = res.data;
					},
					fail: () => {
						console.log("请求失败");
					},
					complete: () => {}
				});
			},
			readNews: function(e) {
				let url = e.currentTarget.id;
				plus.runtime.openWeb(url);
			},
			loadMoreNews: function(newsType) {
				uni.request({
					url: 'https://app.menglinking.club/news/' + newsType,
					method: 'GET',
					success: res => {
						console.log("请求更多成功");
						for (var i = 0; i < res.data.length; i++) {
							this.NewsData.push(res.data[i]);
						}
					},
					fail: () => {
						console.log("请求失败");
					},
					complete: () => {}
				});
			},
			loadNews: function(newsType) {
				uni.request({
					url: 'https://app.menglinking.club/news/' + newsType,
					method: 'GET',
					success: res => {
						console.log("请求更多成功");
						this.NewsData = res.data;
					},
					fail: () => {
						console.log("请求失败");
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>
